<!-- 右上角空调控制面板 -->

<template>
    <div class="kongTiao">
        <div class="main">
            <p class="top">
                <label>{{ deviceInfo.text }}</label>
                <span>
                    <el-tooltip content="刷新" placement="left">
                        <img src="@/assets/images/1103/刷新.svg" @click="refresh" style="width: 16px; height: 16px" />
                    </el-tooltip>
                    <img src="@/assets/images/1103/line.svg" style="height: 16px; width: 2px" />
                    <img :src="getKtWifi()" style="cursor: default; width: 19px; height: 16px" />
                </span>
            </p>
            <div class="temp">
                <p>
                    <!-- 温度设定限制：16-31度 -->
                    <img src="@/assets/images/newIndex/new/10.png" @click="reduceWd" />
                    <label>{{ ktDetail.设定温度 }}℃</label>
                    <img src="@/assets/images/newIndex/new/10.1.png" @click="addWd" />
                </p>
                <p>室温：{{ ktDetail.环境温度 }}℃</p>
            </div>

            <div class="dl">
                <div>电量：{{ ktDetail.总用电量 }}KWH</div>
                <div>功率：{{ ktDetail.功率Pa }}W</div>
                <div>电压：{{ ktDetail.电压Va }}V</div>
            </div>

            <div class="error">
                <div v-if="gzzt.length == 0">
                    <el-tooltip content="无故障" placement="left">
                        <img src="@/assets/images/monitor/grayTip.png" style="width: 15px; height: 15px" />
                    </el-tooltip>
                </div>

                <div v-else>
                    <div v-for="item in gzzt" :key="item">
                        <img src="@/assets/images/newIndex/new/14.png" />
                        <label>{{ item }}</label>
                    </div>
                </div>
            </div>
            <!-- 自动 begin -->
            <img src="@/assets/images/newIndex/new/4.png" v-if="!kz0" class="img1 imgPo" @click="imgClick0" />
            <img src="@/assets/images/newIndex/new/4.1.png" v-if="kz0" class="img1 imgPo" @click="imgClick0" />
            <!-- 自动 end -->
            <!-- 制冷 begin -->
            <img src="@/assets/images/newIndex/new/5.png" v-if="kz1" class="img2 imgPo" @click="imgClick1" />
            <img src="@/assets/images/newIndex/new/5.1.png" v-if="!kz1" class="img2 imgPo" @click="imgClick1" />
            <!-- 制冷 end -->
            <!-- 制热 begin -->
            <img src="@/assets/images/newIndex/new/6.png" v-if="!kz4" class="img3 imgPo" @click="imgClick4" />
            <img src="@/assets/images/newIndex/new/6.1.png" v-if="kz4" class="img3 imgPo" @click="imgClick4" />
            <!-- 制热 end -->
            <!-- 除湿 begin -->
            <img src="@/assets/images/1021/chushi.svg" v-if="!kz2" class="img4 imgPo" @click="imgClick2" />
            <img src="@/assets/images/1021/chushi2.svg" v-if="kz2" class="img4 imgPo" @click="imgClick2" />
            <!-- 除湿 end -->
            <!-- 送风 begin -->
            <img src="@/assets/images/1021/songfeng.svg" v-if="!kz3" class="img5 imgPo" @click="imgClick3" />
            <img src="@/assets/images/1021/songfengOpen.svg" v-if="kz3" class="img5 imgPo" @click="imgClick3" />
            <!-- 送风 end -->

            <!-- 风速 begin -->
            <!-- ktDetail.设定风速  Sjx=6  cs参数设定对应  0-自动 1-低速 2-中速 3-高速  -->

            <!-- 自动和中速是一样的 -->
            <!-- <div v-if="ktDetail.设定风速 == 1">
                <img src="@/assets/images/newIndex/new/11.1.png" class="img6 imgPo" style="cursor: default" />
                <img src="@/assets/images/newIndex/new/11.png" class="img7 imgPo" style="cursor: default" />
                <img src="@/assets/images/newIndex/new/11.png" class="img8 imgPo" style="cursor: default" />
            </div>
            <div v-else-if="ktDetail.设定风速 == 3">
                <img src="@/assets/images/newIndex/new/11.1.png" class="img6 imgPo" style="cursor: default" />
                <img src="@/assets/images/newIndex/new/11.1.png" class="img7 imgPo" style="cursor: default" />
                <img src="@/assets/images/newIndex/new/11.1.png" class="img8 imgPo" style="cursor: default" />
            </div>
            <div v-else>
                <img src="@/assets/images/newIndex/new/11.1.png" class="img6 imgPo" style="cursor: default" />
                <img src="@/assets/images/newIndex/new/11.1.png" class="img7 imgPo" style="cursor: default" />
                <img src="@/assets/images/newIndex/new/11.png" class="img8 imgPo" style="cursor: default" />
            </div> -->

            <img :src="getSsImg()" class="imgsf imgPo" style="cursor: default" />

            <!-- 风速 end -->

            <!-- 开关机 begin -->
            <el-tooltip content="点击开机" placement="left">
                <img src="@/assets/images/newIndex/new/9.png" v-if="close" class="img9 imgPo" @click="closeOrOpen" />
            </el-tooltip>
            <el-tooltip content="点击关机" placement="left">
                <img src="@/assets/images/newIndex/new/9.1.png" v-if="!close" class="img9 imgPo" @click="closeOrOpen" />
            </el-tooltip>
            <!-- 开关机 end-->
        </div>

        <img :src="getKgjImg()" class="imgBg" />

        <loading :title="loadingTitle" :show="showloading"></loading>
    </div>
</template>

<script>
import {PopupCommon} from '@/libs/popupCommon'
import {AjaxCommon, WriteSetRun} from '@/libs/apiCommon'
import loading from '@/components/loading'
import {Utility} from '@/libs/utility'
export default {
    props: ['ktInfo', 'deviceInfo', 'windSpeed', 'ktMode'],
    components: {
        loading
    },
    name: 'kongTiao',
    watch: {
        windSpeed: {
            handler(newV) {
                this.ktDetail.设定风速 = newV
            }
        },
        ktMode: {
            handler(newV) {
                this.ktDetail.设定模式 = newV

                this.kz0 = newV == '0'
                this.kz1 = newV == '1'
                this.kz4 = newV == '4'
                this.kz2 = newV == '2'
                this.kz3 = newV == '3'
            }
        },
        ktInfo: {
            handler(newV) {
                if (typeof newV?.环境温度 != 'undefined') {
                    this.ktDetail = newV
                    console.log(newV.设定模式, newV.设定风速, 'newV.设定模式..')
                    this.kz0 = newV.设定模式 == '0'
                    this.kz1 = newV.设定模式 == '1'
                    this.kz4 = newV.设定模式 == '4'
                    this.kz2 = newV.设定模式 == '2'
                    this.kz3 = newV.设定模式 == '3'

                    // 风速

                    // 0 关机  true
                    this.close = newV.开关机 == '0'
                    const gzStatus = newV.故障状态
                    const gzSplit = gzStatus.split('')
                    let gsList = []
                    const text = [
                        '断电',
                        '过流',
                        '通讯模块故障',
                        '红外模块故障',
                        '状态检测故障',
                        '时间参数错误',
                        '温度参数错误',
                        '人感参数错误',
                        '待机功耗异常',
                        '实时时钟故障',
                        '温度检测故障',
                        '空调脱机运行',
                        '存储参数错误',
                        '预存电量用完',
                        '存储电量错误',
                        '存储校表错误'
                    ]
                    // 1是有故障
                    for (let index = 0; index < 16; index++) {
                        if (gzSplit[index] == 1) {
                            gsList.push(text[index])
                        }
                    }
                    // 这里最多显示4个，多了不显示
                    this.gzzt = gsList.length > 4 ? gsList.slice(0, 4) : gsList
                    // 故障状态
                    //  断电  过流  通讯模块故障 红外模块故障 状态检测故障 时间参数错误 温度参数错误 人感参数错误 待机功耗异常 实时时钟故障 温度检测故障 空调脱机运行 存储参数错误 预存电量用完 存储电量错误 存储校表错误
                } else {
                    this.ktDetail = {}
                    this.close = true
                    this.gzzt = []
                    this.kz0 = false
                    this.kz1 = false
                    this.kz4 = false
                    this.kz2 = false
                    this.kz3 = false
                }
            },
            immediate: true
        }
    },
    data() {
        return {
            showloading: false,
            loadingTitle: '数据处理中，请稍等...',
            /** 故障状态 */
            gzzt: [],
            /**
             * 
             * --------Modbus（卓强空调控制器）--------
是否有效数据：True
表地址：134
中央空调集抄_操作类别：读取设备状态
协议类型：1
执行情况：True
 ID：CZKT4GB00575
 开关机：0
 环境温度：21
 设定模式：0
 设定模式：0
 设定温度：0
 设定风速：0
 空调风向：0
 温度使能状态：1
 故障状态字.断电：False
 故障状态字.过流：False
 工作状态字.调温：False
 工作状态字.人感：False
 工作状态字.温度：False
 工作状态字.时间：False
 工作状态字.手动：False
 工作状态字.计量：False
 工作状态字.断电：True
 工作状态字.机房省电：False
 工作状态字.定时：False
 空调插头状态：0
 季节模式：0
 允许空调开机：2
 总用电量：13.576kWh
 电流Ia：0.004A
 电流Ia：233.3V
 功率Pa：1W
 剩余电量：0kWh
 预存电量：0kWh
 信号强度：23  信号数据范围 为  0~31   31的时候信号最大
 ICCID：898608411124D5390300
 设备时间：20251025100626
 人感人数：0
 人感延迟人数：1
 人感延迟时间：180
  故障状态字.通讯模块故障 ：False
  故障状态字.红外模块故障 ：False
  故障状态字.状态检测故障 ：False
  故障状态字.时间参数错误 ：False
  故障状态字.温度参数错误 ：False
  故障状态字.人感参数错误 ：False
  故障状态字.人数参数错误2 ：False
  故障状态字.待机功耗异常 ：False
  故障状态字.实时时钟故障 ：False
  故障状态字.温度检测故障 ：False
  故障状态字.空调脱机运行 ：False
  故障状态字.存储参数错误 ：False
  故障状态字.预存电量用完 ：False
  故障状态字.存储电量错误 ：False
  故障状态字.存储校表错误 ：False

解析时间：2025-10-25 10:59:48:971
             */
            ktDetail: {},
            kz0: false,
            kz1: true,
            kz4: false,
            kz2: false,
            kz3: false,
            /** true 关机 false 开机 */
            close: false
        }
    },
    computed: {},
    created() {
        console.log(this.deviceInfo)
    },
    methods: {
        /** 获取风速图片 */
        getSsImg() {
            if (this.close) {
                return require('@/assets/images/1103/风速close.svg')
            } else {
                //   <!-- ktDetail.设定风速  Sjx=6  cs参数设定对应  0-自动 1-低速 2-中速 3-高速  -->
                //  风速（低）.gif
                // 风速（高）.gif
                //  风速（中-自动）.gif
                if (this.ktDetail.设定风速 == 0 || this.ktDetail.设定风速 == 2) {
                    return require('@/assets/images/1103/风速（中-自动）.gif')
                } else if (this.ktDetail.设定风速 == 1) {
                    return require('@/assets/images/1103/风速（低）.gif')
                } else {
                    return require('@/assets/images/1103/风速（高）.gif')
                }
            }
        },
        /** 获取空调信号,不受开关机的影响 */
        getKtWifi() {
            //  信号强度：23  信号数据范围 为  0~31   31的时候信号最大
            const xhqd = parseInt(this.ktDetail?.信号强度 ?? 23)
            if (xhqd <= 6.2) {
                return require('@/assets/images/1103/信号1.svg')
            } else if (xhqd > 6.2 && xhqd <= 6.2 * 2) {
                return require('@/assets/images/1103/信号2.svg')
            } else if (xhqd > 6.2 * 2 && xhqd <= 6.2 * 3) {
                return require('@/assets/images/1103/信号3.svg')
            } else if (xhqd > 6.2 * 3 && xhqd <= 6.2 * 4) {
                return require('@/assets/images/1103/信号4.svg')
            } else {
                return require('@/assets/images/1103/信号max.svg')
            }
        },
        getKgjImg() {
            return !this.close ? require('@/assets/images/newIndex/new/ktOpen.png') : require('@/assets/images/newIndex/new/ktClose.png')
        },
        refresh() {
            this.$emit('refresh', '')
        },
        /** 是否开机 */
        isClose() {
            if (this.close) {
                PopupCommon.notify('info', '请先开机')
                return false
            }
            return true
        },
        // 温度减少
        async reduceWd() {
            const self = this
            if (!self.isClose()) {
                return
            }
            //   <!-- 温度设定限制：16-31度 -->
            if (self.ktDetail.设定温度 == 16) {
                return
            }
            self.ktDetail.设定温度--
            Utility.debounce(async () => {
                WriteSetRun(self.deviceInfo.id, 5, self.ktDetail.设定温度)
            })
        },
        async addWd() {
            const self = this
            if (!self.isClose()) {
                return
            }
            if (self.ktDetail.设定温度 == 31) {
                return
            }
            self.ktDetail.设定温度++
            Utility.debounce(async () => {
                WriteSetRun(self.deviceInfo.id, 5, self.ktDetail.设定温度)
            })
        },
        /**
         * 设定模式点击公共方法
         * @param modeValue 模式值： 0：自动；1，制冷；4，制热；2，除湿；3，送风；
         */
        modeClickCommon(modeValue) {
            const self = this
            if (!self.isClose()) {
                return
            }
            // 本身就是这个状态，点击无效
            if (this.kz0 && modeValue == 0) {
                return
            }
            if (this.kz1 && modeValue == 1) {
                return
            }
            if (this.kz2 && modeValue == 2) {
                return
            }
            if (this.kz3 && modeValue == 3) {
                return
            }
            if (this.kz4 && modeValue == 4) {
                return
            }
            Utility.debounce(async () => {
                // 制冷，如果设定温度为0，先默认26
                if (modeValue == 1 && self.ktDetail.设定温度 == 0) {
                    self.ktDetail.设定温度 = 26
                }
                // 制热，如果设定温度为0，先默认22
                if (modeValue == 4 && self.ktDetail.设定温度 == 0) {
                    self.ktDetail.设定温度 = 22
                }
                // 原始值
                const oldValue = [self.kz0, self.kz1, self.kz4, self.kz2, self.kz3]
                // 先设置成功
                for (let index = 0; index < 5; index++) {
                    if (modeValue == index) {
                        self[`kz${index}`] = true
                        self.$emit('mode', {
                            cs: modeValue,
                            isTrue: true
                        })
                    } else {
                        self[`kz${index}`] = false
                    }
                }
                const isTrue = await WriteSetRun(self.deviceInfo.id, 4, modeValue)
                // 失败了就还原
                if (!isTrue) {
                    for (let index = 0; index < 5; index++) {
                        if (oldValue[index]) {
                            self[`kz${index}`] = true
                            self.$emit('mode', {
                                cs: index,
                                isTrue: true
                            })
                        } else {
                            self[`kz${index}`] = false
                        }
                    }
                }
            })
        },
        // 设定模式  cs参数设定对应  0：自动；1，制冷；2，除湿；3，送风；4，制热
        imgClick0() {
            this.modeClickCommon(0)
        },
        imgClick1() {
            this.modeClickCommon(1)
        },
        imgClick4() {
            this.modeClickCommon(4)
        },
        imgClick2() {
            this.modeClickCommon(2)
        },
        imgClick3() {
            this.modeClickCommon(3)
        },
        // 开关机
        async closeOrOpen() {
            const self = this
            Utility.debounce(async () => {
                /** true为关机状态 */
                const oldClose = self.close
                const kgj = self.close ? 1 : 0
                self.close = !self.close
                const isTrue = await WriteSetRun(self.deviceInfo.id, 3, kgj)
                if (!isTrue) {
                    self.close = oldClose
                }
                self.$emit('close', self.close)
            })
        }
    }
}
</script>

<style scoped lang="scss">
.kongTiao {
    display: flex;
    width: 100%;
    height: 100%;
    background: url('@/assets/images/1021/kogntiaoBg.svg') no-repeat top left;
    background-size: contain;
    overflow: hidden;
    position: relative;
    margin-top: 7px;
    .main {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        padding: 10px 20px;
        width: 100%;
        .top {
            display: flex;
            height: 25px;
            line-height: 25px;
            width: 100%;
            color: #fff;
            label {
                font-size: 14px;
                flex: 1;
                color: #000;
            }
            span {
                text-align: right;
                background: #fff;
                border-radius: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 5px;
                padding: 0 10px;
                img {
                    cursor: pointer;
                }
            }
        }
        .temp {
            font-size: 16px;
            p {
                font-size: 16px;
                padding-left: 73px;
                padding-top: 16px;
                display: flex;
                align-items: center;
                color: #fff;
                img {
                    vertical-align: middle;
                    cursor: pointer;
                    width: 14px;
                }

                label {
                    font-size: 26px;
                    margin: 0 10px;
                }

                &:last-child {
                    padding-left: 19px;
                    margin-top: -29px !important;
                    font-size: 12px;
                }
            }
        }
        .error {
            font-size: 14px;
            display: flex;
            margin-top: 0px;
            align-items: center;
            div {
                margin-right: 5px;
                img {
                    vertical-align: middle;
                    margin-right: 5px;
                    cursor: pointer;
                }
                label {
                    font-size: 12px;
                }
            }
        }
        .dl {
            font-size: 12px;
            margin-top: 124px;
            display: flex;
            div {
                font-size: 14px;
                // border: 1px solid #5482f2;
                padding: 5px;
                border-radius: 4px;
                margin-right: 5px;
                color: #000;
            }
        }
        .imgPo {
            position: absolute;
            cursor: pointer;
        }
        .img1 {
            top: 180px;
            left: 54px;
        }
        .img2 {
            top: 162px;
            left: 148px;
        }
        .img3 {
            top: 133px;
            left: 227px;
        }
        .img4 {
            top: 109px;
            left: 311px;
        }
        .img5 {
            top: 94px;
            right: 47px;
        }
        .img6 {
            bottom: 106px;
            right: 82px;
        }
        .img7 {
            bottom: 90px;
            right: 67px;
        }
        .img8 {
            bottom: 69px;
            right: 53px;
        }
        .img9 {
            bottom: 20px;
            right: 20px;
        }

        .imgsf {
            bottom: 72px;
            right: 52px;
        }
    }
    .imgBg {
        position: absolute;
        top: 42px;
        left: 12px;
        width: 228px;
    }
}
</style>
